<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1">
      <tbody>
        <tr>
          <td>0,0</td>
          <td>0,1</td>
          <td>0,2</td>
          <td>0,3</td>
          <td>0,4</td>
          <td>0,5</td>
          <td>0,6</td>
          <td>0,7</td>
        </tr>
        <tr>
          <td>1,0</td>
          <td>1,1</td>
          <td>1,2</td>
          <td>1,3</td>
          <td>1,4</td>
          <td>1,5</td>
          <td>1,6</td>
          <td>1,7</td>
        </tr>
        <tr>
          <td>2,0</td>
          <td>2,1</td>
          <td>2,2</td>
          <td>2,3</td>
          <td>2,4</td>
          <td>2,5</td>
          <td>2,6</td>
          <td>2,7</td>
        </tr>
        <tr>
          <td>3,0</td>
          <td>3,1</td>
          <td>3,2</td>
          <td>3,3</td>
          <td>3,4</td>
          <td>3,5</td>
          <td>3,6</td>
          <td>3,7</td>
        </tr>
        <tr>
          <td>4,0</td>
          <td>4,1</td>
          <td>4,2</td>
          <td>4,3</td>
          <td>4,4</td>
          <td>4,5</td>
          <td>4,6</td>
          <td>4,7</td>
        </tr>
        <tr>
          <td>5,0</td>
          <td>5,1</td>
          <td>5,2</td>
          <td>5,3</td>
          <td>5,4</td>
          <td>5,5</td>
          <td>5,6</td>
          <td>5,7</td>
        </tr>
        <tr>
          <td>6,0</td>
          <td>6,1</td>
          <td>6,2</td>
          <td>6,3</td>
          <td>6,4</td>
          <td>6,5</td>
          <td>6,6</td>
          <td>6,7</td>
        </tr>
        <tr>
          <td>7,0</td>
          <td>7,1</td>
          <td>7,2</td>
          <td>7,3</td>
          <td>7,4</td>
          <td>7,5</td>
          <td>7,6</td>
          <td>7,7</td>
        </tr>
      </tbody>
    </table>
    <script>
      const table = document.body.children[0];
      // const c00 = table.rows[0].cells[0];
      // c00.style.backgroundColor = "red";
      [...table.rows].forEach((row, i) => {
        [...row.cells].forEach((cell, j) => {
          if (i === j) {
            cell.style.backgroundColor = "red";
          }

          // if (i + j === row.cells.length - 1) {
          if (i + j === table.rows.length - 1) {
            cell.style.backgroundColor = "red";
          }

          
        });
      });
    </script>
  </body>
</html>
